<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>充值</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.28rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Helvetica;
            color: #333333;
        }

        .buyinput>div {
            width: 100%;
            padding-left: 0.32rem;
            padding-top: 0.42rem;
            padding-right: 0.26rem;
            box-sizing: border-box;
        }

        .buyinput>div>p {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .buyinput>div>div {
            border-bottom: 1px solid #E5E5E5;
            height: 0.9rem;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
        }

        .buyinput>div>div>input {
            border: none;
            outline: none;
            flex: 1;
            height: 70%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            font-size: 0.28rem;
            padding-left: 0;
        }

        .buyinput>div>div>input::placeholder {
            color: rgba(179, 179, 179, 1);
            font-size: 0.28rem;
        }

        .buyinput>div>div>span {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(38, 38, 38, 1);
        }

        .buyinput>div>b {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255, 210, 3, 1);
            margin-top: 0.12rem;
        }

        .gobuyUsdt {
            width: 100%;
        }

        #sureBuyUsdt {
            width: 6.9rem;
            outline: none;
            border: none;
            margin-left: calc((100% - 6.9rem) / 2);
            height: 0.7rem;
            margin-top: 0.36rem;
            border-radius: 0.1rem;
            background-color: #e5e5e5;
            font-size: 0.28rem;
        }
    </style>

<body>
    <div class="buyinput">
        <div>
            <p>
                购买数量
            </p>
            <div>
                <input type="text" id="buyUsdtNum" placeholder="请输入购买USDT数量"><span>USDT数量</span>
            </div>
            <b>
                单价约<span class="usdtPrice"></span>&nbsp;CNY/USDT
            </b>
        </div>
        <div>
            <p>
                付款人姓名
            </p>
            <div>
                <input type="text" id="userName" placeholder="请输入付款人姓名">
            </div>
        </div>
    </div>
    <div class="gobuyUsdt">
        <button id="sureBuyUsdt" disabled=disabled>
            购买
        </button>
        <p
            style="font-size:0.24rem;font-family:PingFang SC;font-weight:400;color:rgba(137,137,137,1);padding-left: 0.32rem;margin-top: 0.22rem;display: flex;display: -webkit-flex;align-items: center;">
            <img src="../../image/tipsimg.png" style="width: 0.25rem;height: 0.25rem;margin-right: 0.1rem;">交易<span
                style="color: #FFD203;">0</span>手续费
        </p>
        <div style="margin-top:0.3rem;padding: 0 0.3rem;">
            <span>
                提示:
            </span>
            <br>
            <p style="color:#595959;margin-top: 0.1rem;line-height: 0.5rem;font-size: 0.28rem;">
                1.快捷买币服务由第三方提供<br>
                <span style="color: #F86666;">
                    2.USDT汇率实时变化，由于汇率波动所产生的差额，平台不予承担
                </span><br>
                3.人人矿场不提供USDT代售服务，可通过提币提入数字钱包操作
            </p>
        </div>
    </div>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            app.headerMap(function (ret) {
                var pageValue = {
                    name: "thirdpartylist",
                    subpage: "extrapage/thirdpartylist",
                    title: "充值记录",
                };
                app.setNavBarAttr(pageValue);
            });
            if (app.ST == "ios") {
                $("input").click(function () {
                    $(this).focus().select(); //保险起见，还是加上这句。
                });
            }
            var account = app.getAccount();
            var coinPrice = 0; //币价
            app.asynchronousAjax("otc/usdt-price", {
                uid: account.uid,
                token: account.token
            }, function (ret) {
                app.log('汇率',ret)
                app.stopRefresh();
                if (ret.code == 200) {
                    coinPrice = String(ret.data.price).replace(/([0-9]+\.[0-9]{2})[0-9]*/, "$1");
                    $(".usdtPrice").text(String(ret.data.price).replace(/([0-9]+\.[0-9]{4})[0-9]*/, "$1"));
                }
            });

            $(".buyinput input").on("input propertychange", function (params) {
                var buyUsdtNum = $("#buyUsdtNum").val();
                var userName = $("#userName").val();
                if (buyUsdtNum && userName) {
                    $("#sureBuyUsdt").attr("disabled", false).css({ "backgroundColor": "#ffd203" })
                } else {
                    $("#sureBuyUsdt").attr("disabled", true).css({ "backgroundColor": "#e5e5e5" });
                }
            });
            //当输入框输入数字时
            var inputStartTime = 0; //开始输入第一个数字的时间
            $("#buyUsdtNum").on("input propertychange", function (event) {
                inputStartTime = event.timeStamp;
                setTimeout(function () {
                    if (inputStartTime - event.timeStamp == 0) {
                        var thisVal = $("#buyUsdtNum").val();
                        if (Number(thisVal) < 1) {
                            $("#buyUsdtNum").val(1);
                        } else {
                            $("#buyUsdtNum").val(String($("#buyUsdtNum").val()).replace(/([0-9]+\.[0-9]{4})[0-9]*/, "$1"));
                        }
                    }
                }, 2000)
            })
            $("#sureBuyUsdt").on("click", function () {
                if ($("#buyUsdtNum").val() < 1) {
                    app.toast("USDT最小购买数量为1个");
                    return
                }
                if (!$("#buyUsdtNum").val()) {
                    app.toast("请输入付款人姓名");
                    return
                }
                app.openFrame({
                    name: "surebuyusdt",
                    url: app.hd + "mine/surebuyusdt.html",
                    bgColor: "rgba(0,0,0,0.4)",
                    rect: {
                        x: 0,
                        y: 0,
                        w: app.W,
                        h: app.H
                    },
                    pageParam: {
                        userName: $("#userName").val(),
                        coinNumber: $("#buyUsdtNum").val(),
                        coinPirce: coinPrice
                    }
                });
            })
        };
    </script>
</body>

</html>